<template>
    <div>
        <!-- 主体内容 -->
        <div class="container">
            <div v-for="(item, d_id) in dairyDetail" :key="d_id">
                <img class="bc_img" :src="item.d_img" />
                <div class="bottom">
                    <div class="user_row">
                        <img class="user_touxiang" :src="item.d_img" alt />
                        <span class="user_name">{{ item.d_man_name }}</span>
                    </div>
                    <p class="detail">{{ item.d_detail }}</p>
                    <p class="fabu_time">发布于{{ formatDate(item.d_time) }}</p>
                </div>
            </div>

            <div class="go_back" @click="Go_back">
                <img src="@/assets/img/jiyang/fanhui.png" alt />
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            //存储日记信息
            dairyDetail: []
        };
    },
    methods: {
        getdairyDataByid() {
            this.http.get(`${this.$api.getDairyById}/${this.$route?.query?.d_id}`)
                .then(res => {
                    if (res.data.code == 200) {
                        this.dairyDetail = res.data.data;
                    }
                });
        },

        Go_back() {
            this.$router.go(-1);
        },
        formatDate(date) {
            return this.$moment(date).format("YYYY-MM-DD HH:mm:SS");
        }
    },
    mounted() {
        console.log("--------d_id:", this.d_id, this.$route?.query?.d_id);
        this.getdairyDataByid();
    }
};
</script>
  
<style lang="scss" scoped>
.container {
    background-color: #000;
    color: #ffffff;
    font-size: 1.4rem;
    text-align: start;

    .go_back {
        width: 4rem;
        height: 4rem;
        background-color: rgba($color: #ffffff, $alpha: 0.7);
        position: fixed;
        border-radius: 50%;
        top: 2rem;
        left: 2rem;

        img {
            width: 2.75rem;
            height: 2.75rem;
            padding: 1rem;
            padding-top: 0.5rem;
        }
    }

    .bc_img {
        height: 100vh;
        width: 100vw;
        object-fit: scale-down;
    }

    .bottom {
        position: fixed;
        bottom: 0;
        left: 2rem;

        .user_row {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;

            .user_touxiang {
                display: block;
                width: 3rem;
                height: 3rem;
                //裁减掉多余部分,不拉伸 不失真
                object-fit: cover;
                border-radius: 50%;
                background-color: white;
            }

            .user_name {
                margin-left: 1rem;
            }
        }

        .detail {
            margin-bottom: 1rem;
        }

        .fabu_time {
            padding-bottom: 1rem;
            font-size: 1.2rem;
            color: #bcbcbc;
        }
    }
}
</style>
  